<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<script src='./js/vue.js'></script>
</head>
<body>
<div id='app'>
    <input type="text" v-model="name" placeholder="请输入用户名" >
    <input type="text" v-model="age" placeholder="请输入年龄" >

    <button @click.enter="addUser" >提交</button>
    <button @click="Clear">清空</button>

    <ul>
        <li v-for="(user,index) in userList">
            {{user.name}}---{{user.age}}---
            <button @click="delUser(index)">删除</button>
        </li>
    </ul>
</div>
</body>
<script>
const app = {
data() {
return {
    name:'',
    age:'',
    userList:[]
}
},
methods: {
    addUser(){
        this.userList.unshift({
            name:this.name,
            age:this.age,
        })
        this.name = ''
        this.age = ''
    },
    delUser(index){
        this.userList.splice(index,1)
    },
    Clear(){
        this.userList=[]
    }
},
}
const vm = Vue.createApp(app).mount('#app')
</script>
</html>